<template>
  <div class="home" :class="{ custom: layoutTable && layoutTable.grids.length > 0 }">
    <!-- <flowArea height="260"></flowArea> -->
    <!-- <iframe v-for=""></iframe> -->
    <div v-show="false">
      <iframe v-for="item in systemList" :key="item.id" :src="item.authUrl"></iframe>
    </div>
    <table
      class="layout-table"
      cellspacing="0"
      cellpadding="0"
      ref="layoutTable"
      v-if="layout!==null && layout.info"
    >
      <colgroup v-if="layoutTable.colsWidth.length > 0">
        <col v-for="(colw, index) in layoutTable.colsWidth" :key="index" :width="colw + '%'" />
      </colgroup>
      <tbody>
        <tr
          v-for="(row, ri) in layoutTable.grids"
          :key="ri"
          :style="{
            height: layoutTable.rowsHeight[ri] + 2 + 'px'
          }"
        >
          <td
            v-for="(col, ci) in row"
            :key="ci"
            v-show="getCompn(col.url).length>0"
            :colspan="col.colspan"
            :rowspan="col.rowspan"
          >
          <!-- {{getCompn(col.url)}} -->
          <component :is="getCompn(col.url)"></component>
            <!-- <iframe v-if="col.type == 2" :src="col.url" frameborder="0"></iframe>
            <div
              v-if="!col.type|| col.type.length ===0 && getCompn(col.url).length>0"
              class="comps"
              :style="{
                height: layoutTable.rowsHeight[ri] + 'px'
              }"
            >
            <template v-if="getCompn(col.url).length>0">
              <component :is="getCompn(col.url)"></component>
            </template>
            </div> -->
          </td>
        </tr>
      </tbody>
    </table>
    <el-row v-else :gutter="20">
      <HomeLeft></HomeLeft>
      <HomeRight></HomeRight>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { HomeLeft, HomeRight } from "./components/index";
import commonTool from "@/views/com/commonTool/index.vue";
import messageNotice from "@/views/com/messageNotice/index.vue";
import officalDocument from "@/views/com/officalDocument/index.vue";
import doneArea from "@/views/com/doneArea";
import flowArea from "@/views/com/flowArea";


import ProjectOverview from "@/views/chiefPortal/Chief/components/One";
import Daily from "@/views/chiefPortal/Chief/components/Two";
import Financing from "@/views/chiefPortal/Chief/components/Three";
import Business from "@/views/chiefPortal/Chief/components/Four";
import InputAndOutput from "@/views/chiefPortal/Chief/components/Five";
import ROI from "@/views/chiefPortal/Chief/components/Six";
import ProductCost from "@/views/chiefPortal/Chief/components/Seven";
import COCM from "@/views/chiefPortal/Chief/components/Eight";
import NodeCompletion from "@/views/chiefPortal/Chief/components/Nine";
import LegalProceedings from "@/views/chiefPortal/Chief/components/Ten";
import OtherMatters from "@/views/chiefPortal/Chief/components/Eleven";
import ToDoList from "@/views/chiefPortal/Chief/components/Twelve";
import MyTaskManagementOne from "@/views/chiefPortal/Chief/components/Thirteen";
import MyTaskManagementTwo from "@/views/chiefPortal/Chief/components/Fourteen";
import FastLogin from "@/views/chiefPortal/Chief/components/Fifteen";
import ChiefComponent from "@/views/chiefPortal/Chief";
import ChiefOperatingComponent from "@/views/chiefPortal/ChiefOperating";
export default {
  name: "home",
  data () {
    return {
      layoutTable: {
        colsWidth: [],
        rowsHeight: [],
        grids: []
      },
      comShow: true,
      doneArea,
      flowArea,
      HomeLeft,
      HomeRight,
      commonTool,
      messageNotice,
      officalDocument,
      ProjectOverview,
      Daily,
      Financing,
      Business,
      InputAndOutput,
      ROI,
      ProductCost,
      COCM,
      NodeCompletion,
      LegalProceedings,
      OtherMatters,
      ToDoList,
      MyTaskManagementOne,
      MyTaskManagementTwo,
      FastLogin,
      ChiefComponent,
      ChiefOperatingComponent
    };
  },

  components: {
    ChiefOperatingComponent,
    doneArea,
    flowArea,
    HomeLeft,
    HomeRight,
    commonTool,
    messageNotice,
    officalDocument,
    ProjectOverview,
    Daily,
    Financing,
    Business,
    InputAndOutput,
    ROI,
    ProductCost,
    COCM,
    NodeCompletion,
    LegalProceedings,
    OtherMatters,
    ToDoList,
    MyTaskManagementOne,
    MyTaskManagementTwo,
    FastLogin,
    ChiefComponent
  },
  computed: {
    ...mapGetters(["layout", "systemList"])
  },
  watch: {
    layout (n) {
      console.log(n);
      if (n) {
        console.log(n);
        this.layoutTable = JSON.parse(n.info);
      } else {
        console.log(n);
        this.layoutTable.colsWidth = [];
        this.layoutTable.rowsHeight = [];
        this.layoutTable.grids = [];
      }
    }
  },
  created () {
    // console.log("created", this.layout.info);
  },
  mounted () {
    // console.log("mounted", this.layout.info);
    if (this.layout) {
      this.layoutTable = JSON.parse(this.layout.info);
    }

    // 兼容ie，手动设置所有 td 下 div.component 元素高度
    setTimeout(() => {
      if (window.ActiveXObject) {
        document.querySelectorAll(".layout-table .component").forEach(item => {
          item.style.height = item.parentNode.clientHeight + "px";
        });
      }
    }, 50);
  },
  methods: {
    getCompn (url) {
      if (url && url.length > 0) {
        return url.slice(1, url.length);
      } else {
        return "";
      }
      // const inlineCompn = [
      //   "commonTool",
      //   "messageNotice",
      //   "officalDocument",
      //   "flowArea",
      //   "doneArea"
      // ];
      // var act = "";

      // inlineCompn.forEach(item => {
      //   console.log(url);
      //   if (Array.isArray(url)) {
      //     if (url.includes(item)) {
      //       act = item;
      //     }
      //   }
      // });

      // return act;
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  &.custom {
    margin-left: -10px;
    margin-top: -10px;
  }
  overflow-y: auto;
  overflow-x: hidden;
  /deep/ .el-row {
    height: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  height: 100%;
  /deep/ .el-col {
    margin-bottom: 0;
  }
  .layout-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    td {
      position: relative;
      border: 10px solid #f1f1f5;
      iframe,
      > .comps {
        background-color: #fff;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        // height: 100%;
        // overflow: auto;
        box-shadow: 2px 2px 4px #bbb;
      }
    }
  }
}
</style>
